<!DOCTYPE html>
<html lang="en">
  <head>
		<title>CSS Presentation rules Homework 4 Calculator with Drop-Down Navigation Menu</title>
	<meta charset="utf-8" />    
	<meta name="description" content="css - presentation rules" />           
		<link rel="stylesheet" href="style4CalcDDM.css" />  
	<script src="modernizr.custom.58606.js"></script>
  </head> 
  <body> 
    <div id="wrapper">
	 <form name="CalcForm" method="get" action="path/to/some-script.php">
    
	 <div id="header">
		<a href="#" class="logo" title="Calculator logo"><img src="imgs/signcalc.png" alt="calc-logo" /></a>
		<p>Calculator</p>		
		<div class="btns">
			<div id="min"><input type="image" src="imgs/btnmin.png" name="key" alt="keymin" /></div>
			<div id="rest"><input type="image" src="imgs/btnrest.png" name="key" alt="keyrest" /></div>	
			<div id="close"><input type="image" src="imgs/btnclose.png" name="key" alt="keyclose" /></div>		
		</div>
	 </div>

	<fieldset>

   <nav id="nav">
      <ul id="navigation">
        <li><a href="#" class="active">View &raquo;</a>  
      <ul>
        <li><a href="#">Standard&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Alt+1</a></li>
        <li><a href="#">Scientific&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Alt+2</a></li>
        <li><a href="#"><img src="imgs/radiobtn.jpg" alt="pic" />Programmer&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Alt+3</a></li>
        <li><a href="#">Statistics&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Alt+4</a></li>
        <li><a href="#"><span style="color:gray">History&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ctrl+H</span></a></li>
        <li><a href="#">Digit&nbsp;grouping</a></li>
        <li><a href="#"><img src="imgs/radiobtn.jpg" alt="btn" />Basic&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ctrl+F4</a></li>
        <li><a href="#">Unit&nbsp;conversion&nbsp;&nbsp;&nbsp;Ctrl+U</a></li>
        <li><a href="#">Date&nbsp;calculation&nbsp;&nbsp;Ctrl+E</a></li>
        <li><a href="#" class="active">Worksheets &raquo;</a>
           <ul>
             <li><a href="#" class="active">Mortgage</a></li>
             <li><a href="#">Vehicle&nbsp;lease</a></li>
             <li><a href="#">Fuel&nbsp;economy&nbsp;(mpg)</a></li>
             <li><a href="#">Fuel&nbsp;economy&nbsp;(L/100km)</a></li>
           </ul>
        </li>
      </ul>
        </li>
        <li><a href="#">Edit</a></li> 
        <li><a href="#" class="last">Help</a></li>
      </ul>
    </nav>   

    </fieldset>
  
	<div class="text">8854445</div>
      
	<div class="numblock">   
     <div id="frow"><p>&nbsp;&nbsp;&nbsp;0000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0000</p></div>	
     <div id="srow"><p>&nbsp;&nbsp;&nbsp;63&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;47
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;32</p></div>
     <div id="trow"><p>&nbsp;&nbsp;&nbsp;0000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0111&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0001&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1011&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1011&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0111</p></div>	
     <div id="forow"><p>&nbsp;&nbsp;&nbsp;31&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;15
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0</p></div>	
    </div>	
	
	<div class="rb1">	
		<div id="hex"><input type="image" src="imgs/hex.png" name="btn" alt="pic" /></div>
		<div id="dec"><input type="image" src="imgs/dec.png" name="btn" alt="pic" /></div>
		<div id="oct"><input type="image" src="imgs/oct.png" name="btn" alt="pic" /></div>
		<div id="bin"><input type="image" src="imgs/bin.png" name="btn" alt="pic" /></div>
	</div>
	
	<div class="rb2">	
		<div id="qword"><input type="image" src="imgs/qword.png" name="btn" alt="pic" /></div>
		<div id="dword"><input type="image" src="imgs/dword.png" name="btn" alt="pic" /></div>
		<div id="word"><input type="image" src="imgs/word.png" name="btn" alt="pic" /></div>
		<div id="byte"><input type="image" src="imgs/byte.png" name="btn" alt="pic" /></div>
    </div>
	
  <table>
     <tr><td><input type="image" src="imgs/emp.png" name="btn" alt="pic" /></td><td><input type="image" src="imgs/mod.png" name="btn" alt="pic" /></td>
        <td><input type="image" src="imgs/la.png" name="btn" alt="pic" /></td><td><input type="image" src="imgs/mc.png" name="btn" alt="pic" /></td>
	    <td><input type="image" src="imgs/mr.png" name="btn" alt="pic" /></td><td><input type="image" src="imgs/ms.png" name="btn" alt="pic" /></td>
	    <td><input type="image" src="imgs/mpl.png" name="btn" alt="pic" /></td><td><input type="image" src="imgs/minm.png" name="btn" alt="pic" /></td>
     </tr>  
	 <tr><td><input type="image" src="imgs/lfb.png" name="btn" alt="pic" /></td><td><input type="image" src="imgs/rgb.png" name="btn" alt="pic" /></td>
        <td><input type="image" src="imgs/letb.png" name="btn" alt="pic" /></td><td><input type="image" src="imgs/lar.png" name="btn" alt="pic" /></td>
	    <td id="hover_img"><input type="image" src="imgs/hce.png" name="btn" alt="pic" /></td><td><input type="image" src="imgs/scor.png" name="btn" alt="pic" /></td>
	    <td><input type="image" src="imgs/plmin.png" name="btn" alt="pic" /></td><td><input type="image" src="imgs/mark.png" name="btn" alt="pic" /></td>
     </tr> 
	 <tr><td><input type="image" src="imgs/rol.png" name="btn" alt="pic" /></td><td><input type="image" src="imgs/ror.png" name="btn" alt="pic" /></td>
        <td><input type="image" src="imgs/letcg.png" name="btn" alt="pic" /></td><td><input type="image" src="imgs/num7.png" name="btn" alt="pic" /></td>
		<td><input type="image" src="imgs/num8.png" name="btn" alt="pic" /></td><td><input type="image" src="imgs/num9.png" name="btn" alt="pic" /></td>
		<td><input type="image" src="imgs/divi.png" name="btn" alt="pic" /></td><td><input type="image" src="imgs/perc.png" name="btn" alt="pic" /></td>
     </tr> 
	 <tr><td><input type="image" src="imgs/or.png" name="btn" alt="pic" /></td><td><input type="image" src="imgs/xor.png" name="btn" alt="pic" /></td>
        <td><input type="image" src="imgs/letd.png" name="btn" alt="pic" /></td><td><input type="image" src="imgs/num4.png" name="btn" alt="pic" /></td>
	    <td><input type="image" src="imgs/num5.png" name="btn" alt="pic" /></td><td><input type="image" src="imgs/num6.png" name="btn" alt="pic" /></td>
	    <td><input type="image" src="imgs/mult.png" name="btn" alt="pic" /></td><td><input type="image" src="imgs/odivx.png" name="btn" alt="pic" /></td>
     </tr>
	 <tr><td><input type="image" src="imgs/lsh.png" name="btn" alt="pic" /></td><td><input type="image" src="imgs/rsh.png" name="btn" alt="pic" /></td>
	     <td><input type="image" src="imgs/lete.png" name="btn" alt="pic" /></td><td><input type="image" src="imgs/num1.png" name="btn" alt="pic" /></td>
	     <td><input type="image" src="imgs/num2.png" name="btn" alt="pic" /></td><td><input type="image" src="imgs/num3.png" name="btn" alt="pic" /></td>
	     <td><input type="image" src="imgs/smin.png" name="btn" alt="pic" /></td><td rowspan="2"><input type="image" src="imgs/seq.png" name="btn" alt="pic" /></td>
	 </tr>
	 <tr><td><input type="image" src="imgs/not.png" name="btn" alt="pic" /></td><td><input type="image" src="imgs/and.png" name="btn" alt="pic" /></td>
	    <td><input type="image" src="imgs/letf.png" name="btn" alt="pic" /></td><td colspan="2"><input type="image" src="imgs/num0.png" name="btn" alt="pic" /></td>
	   <td><input type="image" src="imgs/fs.png" name="btn" alt="pic" /></td><td><input type="image" src="imgs/spl.png" name="btn" alt="pic" /></td>
	 </tr>
  </table>

		<div id="linb"><input type="image" src="imgs/linbrd.png" name="btn" alt="pic" /></div>
		<div id="rinb"><input type="image" src="imgs/rinbrd.png" name="btn" alt="pic" /></div>
		<div id="bib"><input type="image" src="imgs/binbrd.png" name="btn" alt="pic" /></div>
  
 </form>

  </div><!--wrapper-->

 </body>
</html>